<!--校管理员接口-->
<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <!--      使用栅格布局-->
      <a-layout id="components-layout-demo-side" style="min-height: 100vh;">
        <a-row style="width:100%">
          <a-col :span="4" class="col_item">
            <a-layout-sider v-model="collapsed" style="background:white;" width="100%">
              <div style="box-shadow: 0.25em 0.25em 0.25em rgba(169,194,233,.24);padding: 1.5em;">
                <span class="index_system_name">湖南科技大学</span> <span @click="tempRoute()">出卷系统</span>
              </div>
              <router-link to="/admin/index">
                <div class="index_admin_box">
                  <img class="index_admin_logo" :src="adminLogo" />
                  <span class="index_admin_text">校级管理员<br>张三</span>
                </div>
              </router-link>
              <a-menu :key="this.keyPath" class="index_side_bar" theme="light" :default-selected-keys="[keyPath[0]]" mode="inline" :default-open-keys="[keyPath[1]]"  @click="handleClick"  >
                <a-menu-item key="13">
                  <img class="index_side_icon" :src="icon7">
                  <span class="index_side_text index_side_text_cur" @click="toCollegeManage">学院管理</span>
                </a-menu-item>
<!--                <a-menu-item key="14">-->
<!--                  <img class="index_side_icon" :src="icon8">-->
<!--                  <span class="index_side_text index_side_text_cur" @click="toCollegeAdmin">院管理员设置</span>-->
<!--                </a-menu-item>-->
              </a-menu>
            </a-layout-sider>
          </a-col>
          <a-col :span="20" class="col_item" style="background: #CEDEF5">
            <a-layout>
              <a-layout-header style="background: #fff; padding: 0 6em; text-align: right;">
                <span style="font-size: large; margin: 0 1em;cursor: pointer" @click="refreshPage"><a-icon type="sync" style="color:#FFDEAD; font-size: large;" />刷新</span>
                <span style="font-size: large;cursor: pointer" @click="loginOut"><a-icon type="poweroff" style="color:#87CEFA; font-size: large;" />退出</span>
              </a-layout-header>
              <a-layout-content style="padding: 0 16px;background: #CEDEF5">
                <a-breadcrumb style="padding: 1em;text-align: left">
                  <a-breadcrumb-item>{{ itemOne }}</a-breadcrumb-item>
                  <a-breadcrumb-item>{{ itemTwo }}</a-breadcrumb-item>
                </a-breadcrumb>
                <a-row id="main" :style="{ padding: '1%', background: 'white', height: '80%', position: 'fixed', textAlign: 'center', width: '81.5%', margin: '1% auto', overflowY: 'auto' }">
                  <a-result v-if="getTokenCookies() === undefined " status="warning" title="请重新登陆">
                    <template #extra>
                      <a-button key="console" type="primary" @click="()=>$router.push('/login')">
                        前去登陆
                      </a-button>
                    </template>
                  </a-result>
                  <router-view v-else />
                </a-row>
              </a-layout-content>
              <a-layout-footer style="text-align: center;background: #CEDEF5">
                Ant Design ©2018 Created by Ant UED
              </a-layout-footer>
            </a-layout>
          </a-col>
        </a-row>
      </a-layout>
    </div>
  </a-config-provider>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
import adminLogo from '@/assets/image/icon1.png'
import Icon7 from '@/assets/image/icon7.png'
import Icon8 from '@/assets/image/icon8.png'
import Cookies from 'js-cookie'
import Cookie from "js-cookie"; // 引入js-cookie
export default {
  data() {
    let keyPath = Cookies.get("keyPath") // 取侧边栏的存储路径
    if(keyPath !== undefined){
      keyPath = JSON.parse(keyPath)
      if(keyPath.length === 1){
        keyPath.push('1')
      }
    }else{
      keyPath = ['1', '1']
    }
    return {
      collapsed: false,
      adminLogo:adminLogo,
      icon7:Icon7,
      icon8:Icon8,
      locale: zhCN,
      keyPath: keyPath,
      itemOne: '校管理员', // 页面上面的哪一个表示当前的路径的东西
      itemTwo: ''
    }
  },
  methods: {
    tempRoute(){
      Cookie.set("keyPath", ["14"])
      this.keyPath =  ["14"]
      this.$router.push('/school/collegeAdmin')
    },
    //刷新页面
    refreshPage() {
      location.reload()
    },
    // 退出登录
    loginOut(){
      Object.keys(Cookies.get()).forEach(function(cookieName) { // 删除所有cookie
        var neededAttributes = {};
        Cookies.remove(cookieName, neededAttributes);
      });
      this.$router.push('/login')
    },
    toCollegeAdmin(){ // 路由跳转去管理员管理设置
      if("/school/collegeAdmin" !== this.$route.path){
        this.$router.push('/school/collegeAdmin')
       }
    },
    toCollegeManage(){ // 路由跳转去学院管理
      if("/school/college" !== this.$route.path){
        this.$router.push('/school/college')
      }
    },
    handleClick(e){ // 点击菜单栏
      this.keyPath =  e.keyPath
      Cookies.set("keyPath", e.keyPath, {
        expires: 1/24
      }) // 设置存储时间为1小时
      this.setItemPath();
    },
    setItemPath(){ // 获取当前路径
      let nowPath = this.$route.path
      switch(nowPath){
        case "/school/collegeAdmin" : this.itemTwo = '院管理员设置'; break;
        default : this.itemTwo = '学院管理';break;
      }
    },
    getTokenCookies(){
      return Cookies.get('token')
    }
  },
  mounted() {
    this.setItemPath()
  }
};
</script>

<style>
.index_system_name{
  font-weight: bolder;
  font-size: 1.2em;
  margin-right: 1em;
}
.index_admin_box{
  display: flex;
  justify-content: center;
  border-bottom: #ECECEC 1px solid;
  margin: 1em 0;padding: 1.5em 0;
}
.index_admin_logo{
  width: 3em;
  height: 3em;
}
.index_admin_text{
  font-weight: bolder;
  margin-left: 1em;
  display: flex;
  justify-content: center;
  line-height: 2em;
}
.index_side_icon{
  max-width: 2em;
  max-height: 2em;
  margin-right: 2em;
}
.index_side_bar{
  width: 20em;
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
}
.index_side_text{
  width: 5em;
  /*让span的宽度生效*/
  display: inline-block;
}
.index_side_text_cur{
  margin-right: 1em;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /*margin-top: 60px;*/
}
#components-layout-demo-side .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
/*侧边栏栅格布局*/
.col_item{
  height: 100%;
  background: #ffffff;
}
</style>

